<template>
  <div>
    <Back :title="$t('ConsoleContainer_executeConsole')"></Back>
    <div v-show="isShow === 0" class="box">
      <ConsoleForm @submit="submit"></ConsoleForm>
    </div>
    <div v-show="isShow === 1" class="box" v-if="user">
      <ConsoleCmd :user="user" @websocketBack="websocketBack"></ConsoleCmd>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, FormItem, Select, Option, Input, Button, Switch } from 'element-ui'
import Back from '@/components/Back'
import ConsoleForm from '@/components/container/ConsoleForm'
import ConsoleCmd from '@/components/container/ConsoleCmd'
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Select)
Vue.use(Input)
Vue.use(Option)
Vue.use(Button)
Vue.use(Switch)

export default {
  data () {
    return {
      isShow: 0,
      user: null
    }
  },
  methods: {
    // 表单提交处理，隐藏本界面，显示cmd界面
    submit (user) {
      this.isShow = 1
      this.user = user
    },
    // 结束连接处理，回到表单界面
    websocketBack () {
      this.isShow = 0
    }
  },
  components: {
    Back,
    ConsoleForm,
    ConsoleCmd
  }
}
</script>

<style lang="scss" scoped>
.box{
  margin-top: 20px;
}
</style>
